<template>
  <div class="product">
    <!-- 面包屑 -->
    <div class="bread">
      <el-breadcrumb separator="/" style="border:none;">
        <!-- <el-breadcrumb-item :to="{ path: '/user/productcenter/0/1/1' }"></el-breadcrumb-item> -->
        <el-breadcrumb-item>{{activeData.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card :body-style="{ padding: '15px' }" shadow="never">
      <!-- 平台分类标签页 -->
      <div class="tab">
        <el-tabs v-model="currentPlatform">
          <el-tab-pane v-for="(i,j) in tagsData" :key="j" :label="i.name" :name="`${i.id}`">
            <el-card :body-style="{ padding: '15px' }" shadow="never">
              <el-button
                @click="toProductcenter(i.id,m.id)"
                v-for="(m,n) in i.category_usable"
                :key="n"
                plain
              >{{m.name}}</el-button>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 产品详情信息 -->
      <el-card :body-style="{ padding: '15px' }" shadow="never" style="margin-top:15px;">
        <el-row class="header" :gutter="20" v-loading="productDataLoading">
          <el-col :span="9" class="header_b header_l">
            <div class="bimg">
              <el-image
                :src="showImage"
                :preview-src-list="activeData.image"
                style="max-height:250px;"
              ></el-image>
            </div>
            <div class="simg">
              <ul :style="{width:productDataLoading?0:`${activeData.image.length*66}px`}">
                <li
                  v-for="(i,j) in activeData.image"
                  :key="j"
                  @click="changeActiveImage(j)"
                  :class="j==activeImage?'active':''"
                >
                  <img style="height: 100%;width:100%;" :src="i" />
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="15" class="header_b header_r">
            <table>
              <caption>
                <div class="title">{{activeData.name}}</div>
                <div class="subtitle">{{activeData.subtitle}}</div>
              </caption>
              <tr>
                <td>平台</td>
                <td>{{activeData.platform}}</td>
              </tr>
              <tr>
                <td>分类</td>
                <td>{{activeData.category}}</td>
              </tr>
              <tr>
                <td>概况</td>
                <td>{{activeData.overview}}</td>
              </tr>
            </table>
          </el-col>
        </el-row>
        <el-row class="content" style="margin-top:15px;" v-loading="productDataLoading">
          <div class="content_h">
            <el-col :span="3">
              <div :class="activeContentPage==0?'active':''" @click="toggleContentPage(0)">产品特征</div>
            </el-col>
            <el-col :span="3">
              <div :class="activeContentPage==1?'active':''" @click="toggleContentPage(1)">硬件规格</div>
            </el-col>
            <el-col :span="3">
              <div :class="activeContentPage==2?'active':''" @click="toggleContentPage(2)">软件规格</div>
            </el-col>
          </div>
          <div class="content_b">
            <ul ref="content">
              <li :class="activeContentPage==0?'active':''">
                <el-card
                  :body-style="{ padding: '20px' }"
                  shadow="never"
                  v-for="(i,j) in activeData.feature"
                  :key="j"
                >
                  <div slot="header">
                    <span style="font-weight: 700;color:#409eff;">{{i.title}}</span>
                  </div>
                  <div style="font-size: 14px;text-indent: 2em;">{{i.content}}</div>
                </el-card>
              </li>
              <li :class="activeContentPage==1?'active':''">
                <table>
                  <thead>
                    <tr>
                      <th>特性</th>
                      <th>{{activeData.name}}技术规格</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>处理器</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.cpu}}</td>
                    </tr>
                    <tr>
                      <td>芯片组</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.chipset}}</td>
                    </tr>
                    <tr>
                      <td>系统总线</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.system_bus}}</td>
                    </tr>
                    <tr>
                      <td>内存特性</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.memory}}</td>
                    </tr>
                    <tr>
                      <td>集成芯片</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.integrated_chip}}</td>
                    </tr>
                    <tr>
                      <td>扩展槽</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.expansion_slot}}</td>
                    </tr>
                    <tr>
                      <td>外设接口</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.peripheral_interface}}</td>
                    </tr>
                    <tr>
                      <td>光驱</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.cd_rom}}</td>
                    </tr>
                    <tr>
                      <td>电源</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.power_source}}</td>
                    </tr>
                    <tr>
                      <td>工作环境</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.work_environment}}</td>
                    </tr>
                    <tr>
                      <td>外形</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.appearance}}</td>
                    </tr>
                  </tbody>
                </table>
              </li>
              <li :class="activeContentPage==2?'active':''">
                <table>
                  <tbody>
                    <tr>
                      <td>系统支持</td>
                      <td>{{productDataLoading?'':activeData.parameter==null?'暂无':activeData.parameter.os_support}}</td>
                    </tr>
                  </tbody>
                </table>
              </li>
            </ul>
          </div>
        </el-row>
      </el-card>
      <!-- 相关解决方案 -->
      <el-card
        :body-style="{ padding: '0px' }"
        shadow="never"
        style="margin-top:15px;"
        v-loading="productDataLoading"
      >
        <div class="message_h">
          <span>相关解决方案</span>
        </div>
        <div class="message_b"></div>
      </el-card>
      <!-- 相关成功案例 -->
      <el-card
        :body-style="{ padding: '0px' }"
        shadow="never"
        style="margin-top:15px;"
        v-loading="productDataLoading"
      >
        <div class="message_h">
          <span>相关成功案例</span>
        </div>
        <div class="message_b"></div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import platformjson from '../../../../lib/platform.json'
import categoryjson from '../../../../lib/category.json'
export default {
  data() {
    return {
      tagsData: platformjson, // [渲染数据]
      currentPlatform: `${this.$route.params.platformId}`, // [组件属性] 平台标签页索引
      productData: [], // [内部数据] 包含所有已请求的数据
      activeData: {}, // [渲染数据] 用于展示数据
      productDataLoading: true, // [标志] 页面渲染完毕的标志
      activeImage: null, // [内部数据] [标志] 大图片展示的图片在activeData.image中的索引，activeData的图片数据已可供初始化的标志（null → 0）
      showImage: '', // [渲染数据] 大图片展示的图片的地址
      activeContentPage: 0 // [内部数据]
    }
  },
  watch: {
    // activeImage变化则说明大图片展示的图片因用户操作而需要更新，因此立即更新showImage
    activeImage: function(n) {
      this.showImage = this.activeData.image[n]
    }
  },
  methods: {
    changeActiveImage(index) {
      this.activeImage = index
    },
    toggleContentPage(index) {
      this.activeContentPage = index
    },
    toProductcenter(pid, cid) {
      this.$router.push({
        path: `/user/productcenter/${pid}/${cid}/1`
      })
    },
    getProductInfo(id) {
      return new Promise((resolve, reject) => {
        this.axios.get(`/myserver/productinfo/${id}`).then(res => {
          // 给图片的地址添加前缀
          res.data.image.forEach((i, j, k) => {
            k[j] = this.API.myserver + i
          })
          platformjson.forEach(i => {
            if (i.id === res.data.platform_id) {
              res.data.platform = i.name
            }
          })
          categoryjson.forEach(i => {
            if (i.id === res.data.category_id) {
              res.data.category = i.name
            }
          })
          this.activeData = res.data
          this.activeImage = 0
          this.productData[id] = res.data
          localStorage.setItem('productData', JSON.stringify(this.productData))
          resolve()
        })
      })
    },
    loadProductInfo(req) {
      if (this.productData === null) {
        this.productData = []
      }
      if (this.productData[req.params.id] == null) {
        this.getProductInfo(req.params.id).then(() => {
          setTimeout(() => {
            this.productDataLoading = false
          }, 300)
        })
      } else {
        this.activeData = this.productData[req.params.id]
        this.activeImage = 0
        this.showImage = this.activeData.image[0]
        this.productDataLoading = false
      }
    }
  },
  created() {
    // 先从本地存储获取productListData数据
    this.productData = JSON.parse(localStorage.getItem('productData'))
    this.loadProductInfo(this.$route)
    // 初始化标签页的渲染数据
    this.tagsData.forEach(i => {
      i.category_usable.forEach((m, n) => {
        for (var o in categoryjson) {
          if (categoryjson[o].id === +m) {
            i.category_usable[n] = categoryjson[o]
          }
        }
      })
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.productDataLoading = true
    this.loadProductInfo(to)
    next()
  }
}
</script>

<style lang="less" scope>
.product {
  .bread {
    padding: 20px 0;
  }
  .header {
    display: flex;
    .header_b {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .header_l {
      > .bimg {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      > .simg {
        margin: 20px 0;
        overflow: hidden;
        > ul {
          height: 40px;
          margin: 0;
          padding: 0;
          list-style: none;
          user-select: none;
          > li {
            height: 100%;
            width: 66px;
            float: left;
            cursor: pointer;
            box-sizing: border-box;
            &.active {
              border: 2px solid #aeaeae;
            }
          }
        }
      }
    }
    .header_r {
      > table {
        border-collapse: collapse;
        > caption {
          text-align: left;
          padding: 20px;
          > .title {
            color: #409eff;
            font-size: 24px;
          }
          > .subtitle {
            color: #999;
            font-size: 14px;
          }
        }
        > tr {
          border-bottom: 1px solid #ebeef5;
          transition: background-color 0.25s ease;
          &:nth-of-type(2n + 1) {
            background-color: #fff;
          }
          &:nth-of-type(2n) {
            background-color: #fafafa;
          }
          &:hover {
            background-color: #f5f7fa;
          }
          > td {
            padding: 20px;
            &:nth-of-type(1) {
              width: 50px;
              text-align: center;
              font-weight: 700;
            }
            &:nth-of-type(2) {
              font-size: 14px;
              color: #606266;
            }
          }
        }
      }
    }
  }
  .content {
    > div {
      border-bottom: 1px solid #ebeef5;
    }
    > .content_h {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-weight: 700;
      border-top: 1px solid #ebeef5;
      user-select: none;
      > .el-col {
        > div {
          cursor: pointer;
          &:hover {
            background-color: #8cc4fc;
          }
          &.active {
            cursor: default;
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }
    > .content_b {
      padding-top: 15px;
      > ul {
        margin: 0;
        padding: 0;
        list-style: none;
        > li {
          display: none;
          &.active {
            display: block;
          }
          table {
            width: 100%;
            border: 1px solid #ebeef5;
            border-collapse: collapse;
            th,
            td {
              padding-left: 10px;
              font-size: 14px;
              &:nth-of-type(1) {
                width: 25%;
              }
              &:nth-of-type(2) {
                width: 75%;
              }
            }
          }
          &:nth-of-type(1) {
            > .el-card {
              > div:hover {
                background-color: #d1e7fe;
              }
            }
          }
          &:nth-of-type(2) {
            tr:hover {
              background-color: #8cc4fc;
            }
            th,
            td {
              border: 1px solid #ebeef5;
            }
            th {
              background-color: #409eff;
              color: #fff;
              user-select: none;
            }
          }
          &:nth-of-type(3) {
            td {
              &:nth-of-type(1) {
                padding-left: 0;
                font-size: 16px;
                height: 100px;
                text-align: center;
                border-right: 1px solid #ebeef5;
              }
            }
          }
        }
      }
    }
  }
  .message_h {
    padding: 15px;
    color: #fff;
    font-weight: 700;
    background-color: #409eff;
    > span {
      user-select: none;
    }
  }
  .message_b {
    padding: 15px;
  }
}
</style>
